<template>
  <div>
    <div style="padding: 10px 0">
      <el-input style="width: 200px; margin-right: 5px;"
                placeholder="请输入姓名"
                suffix-icon="el-icon-user"
                v-model="name">
      </el-input>
      <el-input style="width: 200px;margin-right: 5px;"
                placeholder="请输入邮箱"
                suffix-icon="el-icon-message"
                v-model="emil">
      </el-input>
      <el-input style="width: 200px;margin-right: 5px;"
                placeholder="请选择日期"
                suffix-icon="el-icon-date"
                v-model="date">
      </el-input>
      <el-button type="success"
                 @click="queryList()">搜索</el-button>
      <div style="padding: 10px 0">
        <el-button type="primary"
                   @click="addModel()">新增<i class="el-icon-plus el-icon--right"></i></el-button>
        <el-button type="danger">删除<i class="el-icon-delete el-icon--right"></i></el-button>
        <el-button type="primary">导入<i class="el-icon-top el-icon--right"></i></el-button>
        <el-button type="primary">导出<i class="el-icon-download el-icon--right"></i></el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="username"
                       label="用户名"
                       width="140">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="120">
      </el-table-column>
      <el-table-column prop="phone"
                       label="电话">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :page-sizes="[100, 200, 300, 400]"
                   :page-size="100"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="400">
    </el-pagination>
    <!--用户信息添加-->
    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
      <el-form label-width="80px"
               :model="user">
        <el-form-item label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="user.nickname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="save()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'APP',
  data () {
    return {
      user: {},//用户对象类
      name: '',
      emil: '',
      date: '',
      tableData: [],
    }
  },
  methods: {
    async queryList () {
      this.request.get("/user/queryAllList").then(res => {
        console.log("====" + res);
        this.tableData = res.data
      })
    },
    addModel () {
      this.dialogVisible = true;
    },
    save () {
      this.request.post("/user/addUser", this.user).then(res => {
        if (res) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.dialogVisible = false;
          this.queryList();
        }
      })
    },
    handleDelete (index, row) {
      this.request.get("/user/delUser?userId=" + row.id).then(res => {
        if (res) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          //this.dialogVisible = false;
          this.queryList();
        }
      })
    },
    handleClose () { },
  },
  created () {
    this.queryList();//列表初始化加载
  },
  mounted () {

  },
}
</script>

